<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>React的表单输入监听</title>
    <script crossorigin src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <script crossorigin src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <script crossorigin src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>

<div id="example"></div>
<script type="text/babel">

    //子控件
    class Content extends  React.Component{
        render(){
            return(
                <div>
                    <h2>子控件输入的内容:{this.props.myInputValueParam}</h2>
                    <input type="text" value={this.props.myInputValueParam} onChange={this.props.updateInputValueParam}/>
                    <input type="submit" value= '提交' onClick={this.props.handleSummitEventParam} />
                </div>
            );
        }
    }



    //自定义输入框组件
    class InputComponent extends React.Component{
        constructor(props){
            super(props);
            this.state = {
                value : '初始化值'
            };
            this.handleInputChange = this.handleInputChange.bind(this);
        }

        //监听事件
        handleInputChange(event){
             this.setState(
                 {value: event.target.value}
             );
        }

        //监听提交事件
        handleSummitEvent(event){
            alert('您输入的内容是' + this.state.value);
            event.preventDefault();
        }

        render() {
            return (
                <div>
                    <Content myInputValueParam = {this.state.value} updateInputValueParam = {this.handleInputChange}
                             handleSummitEventParam = {() =>this.handleSummitEvent()}  />
                </div>
            );
        }
    }



     //下拉选择控件
    class FlvorFormSelect extends React.Component{

        constructor(props) {
            super(props);
            this.state = {
               value : 'null'
            };
            this.handleChangeEevent = this.handleChangeEevent.bind(this);
            //this.handelCommitEvent = this.handelCommitEvent.bind(this);
        }

        handleChangeEevent(event){
            this.setState({value: event.target.value});
        }

        handelCommitEvent(event){
             console.log('您选择的城市是：' + this.state.value);
             alert('您选择的城市是：' + this.state.value);
             event.preventDefault();
        }

        render(){
            return(
                <form>
                   <label>
                       请选择您喜欢的城市：
                       <select value={this.state.value} onChange={this.handleChangeEevent}>
                           <option value="四川">四川</option>
                           <option value="重庆">重庆</option>
                           <option value="成都">成都</option>
                       </select>
                   </label>
                    <input type="submit" value="确定"  onClick={(event) => this.handelCommitEvent(event)}/>
                </form>
            );
        }
    }


    function App(){
        return(
            <div>
                <InputComponent />
                <FlvorFormSelect/>
            </div>
        );
    }

    //要将React元素呈现到根DOM节点，请将两者都传递给ReactDOM.render()
    ReactDOM.render(
        <App/>,
        document.getElementById('example')
    );




</script>

</body>
</html>